<template>
    <div>
        <div class="e-table billList" style="background-color: #fff">
            <!-- 头部buttons -->
            <div class="top">
                <div class="left">
                    <div >
                        <el-button size="small" class="btn-greenYellow" @click="goAdd"
                        >新增</el-button>
                    </div>
                </div>
                <div class="search_box">
                    <el-input class="ipt" type="text"
                        placeholder="输入搜索关键字"
                        v-model="query.keyword"
                        @select="onSearch"
                        @change="onSearch"
                    ><img src="@/assets/search.png" slot="suffix" @click="onSearch" /></el-input>
                    <div class="adverse">
                        <el-button type="primary" @click="onAdvanceSearch">高级搜索</el-button>
                    </div>
                </div>
            </div>
            <el-table
                ref="table"
                :data="tableData"
                border
                style="width: 100%"
                class="table"
                highlight-current-row
                height="0"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
            >
                <el-table-column label="结算编号" fixed width="250" class-name="blue-column">
                    <template slot-scope="{ row }" >
                        <span @click="tableDbShow(row)">{{row.billNo}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="settlementDate" label="结算日期" min-width="100">
                </el-table-column>
                <el-table-column prop="period" label="期数" min-width="50">
                </el-table-column>
                <el-table-column prop="contractName" label="合同名称" min-width="150">
                </el-table-column>
                <el-table-column prop="outsourcerName" label="外包方" min-width="150">
                </el-table-column>
                <el-table-column prop="orgName" label="录入机构" min-width="150">
                </el-table-column>
                <el-table-column prop="amount" label="返还保证金合计（元）" width="130" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="state" label="状态" width="130">
                    <template slot-scope="{ row,$index }">
                        <ToolHistory v-if="row.state == 1" :key="$index" url="/projectsettle/flowEngin/getAuditHistory" :billId="row.billId" :billType="1096">
                            <span v-status="row.state">
                              {{ row.state ? state.find(x=>x.value == row.state).label : '' }}
                            </span>
                        </ToolHistory>
                        <span v-else v-status="row.state">
                             {{ row.state ? state.find(x=>x.value == row.state).label : '' }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column prop="sendEasState" label="传输财务共享" width="130">
                </el-table-column>
            </el-table>
            <!-- 分页 -->
                <ComPagination
                    :total="total"
                    :pageSize.sync="query.limit"
                    :currentPage.sync="query.page"
                    @currentChange="getTableData"
                    @sizeChange="getTableData"
                    class="bottomSetting"
                />
         </div>
    </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import { vueDom, advanceSearch, selectDataClient, openAppClient } from '@/utils/common.js'
import ComPagination from '@/components/pagination/pagination'
import { mapState } from 'vuex'
import { getMainList } from '@/api/settlementManagement/gongchengjieshuan/baozhengjin.js'
import { getCurrentState } from '@/api/settlementManagement/gongchengjieshuan/jiakoukuan.js'
export default {
    computed: {
        ...mapState(['searchData']),
        ...mapState({
            state: state => state.equip.equipData.state, //通用流程状态
        })
    },
    data () {
        return {
            detailsOfProposedArr: [],
            tableData: [],
            addList: [], // 缓存新增数据
            unitList: [],
            isSearch: false,
            addFlag: true,
            materialListTeam: [], //存储执行队列
            materialListIndex: 0,
            tableHeight: 0,
            query: {
                'beginDate': '',
                'contractName': '',
                'endDate': '',
                'keyword': '',
                'limit': 20,
                'orgId': '',
                'outsourcerName': '',
                'page': 1,
                'sendEasStates': [],
                'states': []
            },
            total: 0,
        }
    },
    components: {
        ComPagination,
    },
    mounted () {
        this.getTableData()
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 230
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 230
        }
    },
    methods: {
        getTableData () {
            getMainList(this.query).then(res=>{
                this.tableData = res.list ? res.list : []
                this.total = res.totalCount
            })
        },
        goAdd () {
            this.$router.push('/baozhengjinAdd')
        },
        //双击单元格去查看页面
        tableDbShow (row) {
            const billid = row.billId
            const auditParams = {
                'billId': billid,
                'billType': 1096
            }
            if(row.state === '-1' || row.state === '2' || row.state === '5') {
                this.$router.push({
                    path: '/baozhengjinView',
                    query: { billid: row.billId }
                })
            }else{
                getCurrentState(auditParams).then(res => {
                    if(res.canModify) {
                        this.$router.push({
                            path: '/baozhengjinEdit',
                            query: { billid: row.billId }
                        })
                    }else{
                        this.$router.push({
                            path: '/baozhengjinView',
                            query: { billid: row.billId }
                        })
                    }
                })
            }
        },
        onSearch () {
            this.getTableData()
        },
        onAdvanceSearch () {
            advanceSearch('/guochengJieshuanSearch')
                .then(res => {
                    this.query.keyword = ''
                    this.query.limit = 20
                    this.query.page = 1
                    const { orgId, outsourcerName, contractName,
                        states, sendEasStates, beginDate, endDate } = res
                    this.query.orgId = orgId
                    this.query.outsourcerName = outsourcerName
                    this.query.contractName = contractName
                    this.query.states = states
                    this.query.sendEasStates = sendEasStates
                    this.query.beginDate = beginDate
                    this.query.endDate = endDate
                    this.getData()
                })
        }
    }
}
</script>
